<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
       
       // 原型- 保真图 - htmlcssjs - react - class component(数据 视图 行为) - 组件拆分（多个子组件）
        class  App extends React.Component{
            // 数据
            state = {
                tasks:[] , // 00ff11 []
                task:''
            }

            //行为事件
            // 同步任务内容
            handleChange = (e)=>{
                this.setState({
                    task:e.target.value
                },()=>{
                    // console.log('task',this.state.task);
                }) 
            }

            // 添加任务
            handleAddTask = ()=>{
                const {task,tasks} = this.state
                if(!task) return
                //添加数据 : 同步到state  00ff11
                tasks.unshift({task:task,date:new Date().toLocaleDateString()})
                console.log(this.state);

                //视图同步
                this.setState({
                    task:'', //清空输入
                    tasks:tasks
                })

                // 性能优化：如果setState{key:value} value值不变 不触发更新
            }

            // 删除任务
            handleDeleteTask(index){
                const {tasks} = this.state
                //数组删除  [{1},{2},{3},{4}]
                tasks.splice(index,1)
                console.log(this.state);
                
                this.setState({
                })
                
            }

            //视图
            render(){
                const {tasks} = this.state
                return (
                    <div>
                        <h1> Today Tasks :{tasks.length}</h1>
                        <div>
                            <input type='text' value={this.state.task} onChange={this.handleChange}/>
                            <button onClick={this.handleAddTask}>add task</button>
                        </div>
                        <div>
                            <ul>

                                {
                                    tasks.map((item,index)=>{
                                        return (
                                            <li key={index}>
                                                <span>{index+1}--{item.task}--{item.date}</span>{' '}
                                                <button onClick={this.handleDeleteTask.bind(this,index)}>delete</button>
                                            </li>
                                        )
                                    })
                                }
                              

                            </ul>
                        </div>
                    </div>
                )
            } 
        }

        // splice  剪接

        //删除 : 指定位置 删除，指定个数
        var arr = ['a','b','c','d']
        // arr.splice(1,1) 
        // console.log(arr);
        // arr.splice(1,0) 
        // console.log(arr);
        // arr.splice(1,2) 
        // console.log(arr);

        // 替换 ：指定位置 替换，替换个数
        // arr.splice(1,1,'e')
        // console.log(arr);
        // arr.splice(1,2,'e')
        // console.log(arr);

        // 添加 
        // arr.splice(1,0,'e')
        // console.log(arr);

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>